<template>
  <view class="page-container">
    <view>
      <view class="topImage">
        <image
            src="../../static/images/team/banner.png"
            style="width: 100%; height: 100%"
        />
      </view>
      <u-list @scrolltolower="scrolltolower" :lowerThreshold="150">
        <view class="law-produce-wrapper">
          <view class="list" v-for="(item, index) in lawTeamList">
            <view class="item" @click="onCilckToServiceDetail(item.id)">
              <view class="item-left">
                <u-avatar :src="item.pic" size="55"></u-avatar>
              </view>
              <view class="item-middle">
                <view class="row">
                  <text class="uni-body text-red title">{{
                      item.name || "律师名字"
                    }}
                  </text>
                  <text class="text-gray">{{ item.post|| '' }}</text>
                </view>
                <view class="row row1">
                  <text class="text-gray">{{
                      item.addressTemp || "中国"
                    }}
                  </text>
                  <text class="text-gray">|</text>
                  <text class="text-gray">{{ item.company || "事务所" }}</text>
                </view>
                <view class="dec-item">
                  <u-grid :border="false" @click="click" :col="3">
                    <u-grid-item v-for="(item1, index1) in item.goods">
                      <uni-tag :text="item1" type="line"/>
                    </u-grid-item>
                  </u-grid>
                </view>
              </view>
              <view class="item-right">
                <u-button
                    color="#e43d33"
                    shape="circle"
                    text="了解更多"
                    size="mini"
                ></u-button>
              </view>
            </view>
          </view>
        </view>
      </u-list
      >
    </view>
  </view>
</template>
<script>
import NavBar from "@/components/nav-bar.vue";
import {isEmptyArray, isEmptyObject, isEmptyString} from "@/utils/common";

export default {
  components: {NavBar},
  data() {
    return {
      marginTop: "",
      lawTeamList: [],
      queryParmas: {
        page: 1,
        size: 15,
      },
    };
  },
  onLoad(options) {
    const top = uni.getSystemInfoSync().statusBarHeight + 44;
    this.marginTop = "padding-top:" + top + "px";
  },
  onShow() {
    this.getLawTeamList();
  },
  methods: {
    /**律师列表 */
    getLawTeamList() {
      this.$store.dispatch("LawyerList", this.queryParmas).then((res) => {
        if (this.queryParmas.page == 1) {
          this.lawTeamList = res.data.records;
        } else {
          this.lawTeamList = this.lawTeamList.concat(res.data.records);
        }
        if (!isEmptyArray(this.lawTeamList)) {
          this.lawTeamList.forEach((item) => {
            item.goods = [];
            item.addressTemp=isEmptyObject(item.lawLawyer)?"中国":item.lawLawyer.address;
            if (
                !isEmptyString(item.good1)
            ) {
              item.goods.push(item.good1);
            }
            if (
                !isEmptyString(item.good2)
            ) {
              item.goods.push(item.good2);
            }
            if (
                !isEmptyString(item.good3)
            ) {
              item.goods.push(item.good3);
            }

          });
        }

      });
    },
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/telephone-consultation/index",
      });
    },
    scrolltolower() {
      console.log("scrolltolower");
      this.queryParmas.page++;
      this.getLawTeamList();
    },
    onCilckToServiceDetail(index) {
      uni.navigateTo({
        url: "/pages/law-detail/index?id=" + index,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.page-container {
  width: 100%;
  // min-height: 100vh;
  background-color: #fff;

  .banner {
    width: 100%;
    height: 10rem;
  }

  .topImage {
    width: 100%;
    height: 10rem;
  }

  .index-s1-consult {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20rpx;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: bold;

    .subtitle {
      font-size: 0.8rem;
      font-weight: normal;
    }
  }

  .law-produce-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .list {
      width: 100%;

      .item {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding: 20rpx;
        border-bottom: 5px solid #eee;

        .item-middle {
          display: flex;
          flex-direction: column;
          flex: 1;

          .title {
            font-size: 35rpx;
            padding-left: 20rpx;
          }

          .text-gray {
            font-size: 0.8rem;
            padding-left: 20rpx;
          }

          .row1 {
            margin-top: 10rpx;
          }
        }
      }

      .dec-item {
        margin-top: 0.5rem;
      }
    }

    .u-grid-item {
      margin-top: 20rpx;
    }
  }
}
</style>
    